#beginLayer {
    position: absolute;
    left: 50%;
    top: 50%
}

#beginLayerImg {
    position: absolute;
    width: 175px;
    height: 186px;
    left: -87.5px;
    top: -93px;
    background-image: url(begin-web.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer
}

.videoScrollTop {
    position: absolute;
    width: 100%;
    height: 5px;
    float: left;
    top: -3px;
    cursor: pointer
}

#videoBG {
    width: 100%;
    height: 100%
}

#videoToolbar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    bottom: 0
}

#videoTogglePlay {
    background-image: url(toolbar.png);
    background-size: 91px 140.5px;
    cursor: pointer;
    height: 100%
}

.videoPlay {
    background-position: -40px 4px
}

.videoStop {
    background-position: 5px 4px
}

.videoScroll {
    position: relative;
    height: 100%;
    float: left;
    margin-left: 10px
}

#videoScrollBG {
    position: absolute;
    background: #5b5a5a;
    width: 100%;
    height: 100%;
    pointer-events: none
}

#videoScrollBG1 {
    position: absolute;
    background: #848484;
    width: 0;
    height: 100%;
    pointer-events: none;
    cursor: pointer
}

#videoScrollBG2 {
    position: absolute;
    background: #1caffc;
    width: 0;
    height: 100%;
    pointer-events: none;
    cursor: pointer
}

#videoTime {
    height: 41px;
    line-height: 41px;
    vertical-align: middle;
    text-align: center;
    width: 70px;
    float: left;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff
}

#videoViewPortToggle {
    background-image: url(toolbar.png);
    background-size: 91px 140.5px
}

.videoViewPort1 {
    background-position: 8px -46px
}

.videoViewPort2 {
    background-position: 8px -96px
}

#videoFullScreen {
    background-image: url(toolbar.png);
    background-size: 91px 140.5px
}

.videoFullScreen1 {
    background-position: -135px -46px
}

.videoFullScreen2 {
    background-position: -135px -96px
}

#curVideo {
    width: 85px;
    height: 41px;
    line-height: 41px;
    text-align: center;
    font-size: 14px;
    color: #fff
}

.curVideoText:after {
    content: "";
    width: 6px;
    height: 6px;
    border-color: #fff;
    border-width: 0 0 1px 1px;
    border-style: solid;
    margin-left: 4px;
    top: 17.5px;
    transform: rotateZ(135deg);
    position: absolute
}

.curVideoText_sel:after {
    content: "";
    width: 6px;
    height: 6px;
    border-color: #fff;
    border-width: 0 0 1px 1px;
    border-style: solid;
    margin-left: 4px;
    top: 15px;
    transform: rotateZ(-45deg);
    position: absolute
}

.videoDomList {
    position: absolute;
    background-color: rgba(31, 31, 31, 0.8);
    width: 85px;
    text-align: center;
    padding: 10px 0;
    display: none
}

.videoListDom {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #d1d1d1;
    text-align: center
}

.videoListDomCheck {
    color: #1caffc
}

.floatR {
    float: right
}

.floatL {
    float: left
}

.floatW {
    cursor: pointer;
    width: 48px;
    height: 100%
}
.videoMore1 {
    background: url(more1.png);
    background-size: 100% 100%;
}
.videoMore2 {
    background: url(more2.png);
    background-size: 100% 100%;
}
#thumbList {
    display: block;
    height: 0px;
    overflow-x: auto;
    position: absolute;
    bottom: 45px;
}
.thumbList {
    width: 100%;
    height: 60px;
    margin-top: 4px;
    position: relative;
}
.thumbCon {
    height: 100%;
    width: 0;
    left: 0;
    overflow: hidden;
}
.thumbnail_list {
    float: left;
    width: 110px;
    height: 62px;
    margin: 0px 10px;
    cursor: pointer;
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
}
.easeHeight {
    transition-duration: .5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-property: height,opacity;
    -moz-transition-property: height,opacity;
    -webkit-transition-property: height,opacity;
    -o-transition-property: height,opacity;
}
.toolLeft {
    position: absolute;
    width: 40px;
    height: 135px;
    left: 24px;
    top: 65px;
    background-color: rgba(0,0,0,.2);
    border-radius: 40px;
    opacity: 1;
}
.doThumbUp {
    width: 40px;
    height: 40px;
    background-image: url(praise2.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
    margin-top: 5px;
    cursor: pointer;
}
.doComment {
    margin-left: -3px;
    width: 40px;
    height: 40px;
    background-image: url(comment.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 5px;
    cursor: pointer;
    margin-left: 0;
}
.doGyro {
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.videoGyroscope1 {
    background: url(gyro1.png);
    background-size: contain;
}
.videoGyroscope2 {
    background: url(gyro2.png);
    background-size: contain;
}